<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格设置和字体加粗设置</title>
    <style type="text/css">
        body {
            font-size: 40px;
        }
        .font-italic {
            font-style: italic;
        }
        .font-normal{
            font-style:normal;
        }
        .font-oblique {
            font-style: oblique;
        }
        .font-inherit {
            font-style: inherit;
        }
        .font-initial {
            font-style: initial;
        }
        .weight100{
            font-weight: 100;
        }
        .weight200 {
            font-weight: 200;
        }
        .weight400 {
            font-weight: 400;
        }
        .weight700 {
            font-weight: 700;
        }
        .weight900 {
            font-weight: 900;
        }
        .weight-lighter {
            font-weight: lighter;
        }
        .weight-normal {
            font-weight: normal;
        }
        .weight-bold {
            font-weight: bold;
        }
        .weight-bolder {
            font-weight: bolder;
        }
    </style>
</head>
<body>
<!-- 字体风格设置 -->
    <div class="font-normal">normal</div>
    <div class="font-italic">倾斜设置：italic</div>
    <div class="font-oblique">倾斜设置：oblique</div>

    <div class="font-italic">
        <div class="font-inherit">继承父级 inherit</div>
        <div class="font-initial">不继承父级 initial</div>
        <div>默认继承 </div>
    </div>
    <!-- 字体风格设置 结束-->
    <br><br><br>
    <!-- 字体加粗设置 -->
    <div class="weight100">weight 100</div>
    <div class="weight200">weight 200</div>
    <div class="weight400">weight 400</div>
    <div class="weight700">weight 700</div>
    <div class="weight900">weight 900</div>
    <div class="weight-lighter">weight lighter</div>
    <div class="weight-normal">weight normal</div>
    <div class="weight-bold">weight bold</div>
    <div class="weight-bolder">weight bolder</div>
    <!-- 字体加粗设置 结束-->
</body>
</html>